<script lang="ts" setup>
//行为 
 // 1. 导入函数
 import { reactive } from "vue"; 
  // 2. 创建响应式数据对象
 const obj = reactive({ name:'赵丽颖',  age:18}) 
 const addAge =()=>{
   obj.age++
   console.log(obj)
 }

</script>

<template>
  <!-- template类似鸿蒙组件的build（）函数，用于构建界面 -->
  <p >{{ obj }}</p> 
<button @click="addAge()">一年又一年</button>


 <!-- <p>{{ obj.name }}</p>
 <p>{{ obj.age }}</p>
 <button @click="obj.age++">一年又一年</button> --> 
 
</template>

<style scoped>
/* 样式 类似鸿蒙组件的style（）函数，用于定义样式 */
/* scoped 告诉编译器，这个样式只对当前组件生效，避免样式冲突 */

</style>